<template>
  <div>
    <div class="fixed-table">
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :disable-pageable="true"
        size="mini"
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in myColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" title="填写报告" size="mini" icon="el-icon-edit" @click="createFeedback(row.id)" />
            <!-- <el-button type="text" title="查看统计" size="mini" icon="el-icon-s-data" @click="view(row.id)" /> -->
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog title="填写工作总结" class="fixed-dialog-height" :show.sync="dialogFormVisible" width="80%" :submit-display="true" confirm-text="保存" submit-text="提交" @on-ok="ok" @on-submit="submit" @on-cancel="cancel">
      <!-- <FormDialog title="编辑" :show.sync="dialogFormVisible" width="50%" @on-ok="ok" @on-cancel="cancel"> -->
      <CreateFeedbackForm v-if="dialogFormVisible" ref="createFeedbackForm" :task-id="editQuestionnaireId" />
    </FormDialog>
    <ViewDialog title="统计" class="fixed-dialog-height" :show.sync="dialogViewVisible" width="50%" @on-cancel="viewCancel">
      <ViewForm v-if="dialogViewVisible" :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
// secondary package based on el-pagination
import { mapGetters } from 'vuex'
import FormDialog from '@neu/biz-core/components/FormDialog'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import CreateFeedbackForm from '@neu/dcom-ui/views/questionnairefeedback/components/editForm'
import ViewForm from '@neu/dcom-ui/views/questionnaire/components/viewForm'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import role from '@neu/biz-core/directive/role/index.js' // 权限判断指令
import { list } from '@neu/dcom-ui/api/questionnaire'
import { submit } from '@neu/dcom-ui/api/questionnairefeedback'
import { list as operationGroupList } from '@neu/dcom-ui/api/operationGroup'
import { on } from '@neu/biz-core/utils/utils'
import { debounce } from '@neu/biz-core/utils'

const types = {
  'MIDDLE_YEAR_SUMMARY': '年中总结',
  'END_YEAR_SUMMARY': '年末总结'
}

export default {
  name: 'QuestionnairePage',
  components: {
    FormDialog,
    ViewDialog,
    CreateFeedbackForm,
    ViewForm,
    PageableTable
  },
  directives: { role },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: list,
      insideColumns: [
        {
          title: '任务标题',
          key: 'title',
          sortable: 'custom'
        },
        {
          title: '运维小组',
          key: 'groupCode',
          render: (h, params) => {
            return (
              <span>{ this.getOperationGroupName(params.row.groupCode) }</span>
            )
          }
        },
        {
          title: '所属年',
          key: 'year'
        },
        {
          title: '类型',
          key: 'type',
          render: (h, params) => { return h('span', types[params.row.type]) }
        },
        {
          title: '状态',
          key: 'published',
          render: (h, params) => {
            return (
              <el-tag type={params.row.published ? 'success' : 'info'}>{ params.row.published ? '已发布' : '未发布'}</el-tag>
            )
          }
        },
        {
          title: '发布日期',
          key: 'publishAt'
        },
        {
          title: '截止日期',
          key: 'closedAt'
        }
      ],
      // 编辑新增弹窗
      dialogFormVisible: false,
      dialogViewVisible: false,
      editQuestionnaireId: -1,
      availableOperationGroups: []
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    isWorker: function() {
      return this.roles.some(r => r === 'worker')
    },
    myColumns: function() {
      return this.isWorker ? this.insideColumns : this.insideColumns.filter(it => it.key !== 'groupCode')
    }
  },
  created() {
    operationGroupList().then(response => {
      this.availableOperationGroups = response.data
    })
    this.filter({ s_published: true, s_todo: true, s_scope: this.roles.some(r => r === 'worker') ? 'WORKER' : 'LEADER' })
  },
  methods: {
    view(id) {
      // 打开对话框
      this.editId = id
      this.dialogViewVisible = true
    },
    // 表格编辑按钮点击事件处理
    createFeedback(id) {
      // 打开对话框
      this.editQuestionnaireId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.createFeedbackForm.save().then(response => {
        this.$message({
          showClose: true,
          message: '保存成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.editQuestionnaireId = -1
        this.dialogFormVisible = false
      })
    },
    submit() {
      const that = this
      // 直接调用表单实例的保存方法
      that.$refs.createFeedbackForm.save().then(response => {
        submit(response.data.id).then(response => {
          that.$message({
            showClose: true,
            message: '提交成功！',
            type: 'success'
          })
          that.refresh()
          // 关闭对话框
          that.editQuestionnaireId = -1
          that.dialogFormVisible = false
        })
      })
    },
    cancel() {
      this.editQuestionnaireId = -1
      // this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    },
    getOperationGroupName(code) {
      const group = this.availableOperationGroups.find(it => it.code === code)
      return group ? group.name : code
    },
    // 自适应页面高度
    initListener() {
      this.$_resizeHandler = debounce(() => {
        const _this = this
        const baseInfoSel = document.querySelector('.app-container .schema-edit-container .base-info')
        const baseInfoHeight = baseInfoSel ? baseInfoSel.offsetHeight : 0
        _this.tableHeight = window.innerHeight - 50 - 16 - baseInfoHeight - 300
      }, 300)

      on(window, 'resize', this.$_resizeHandler)
    }
  }
}
</script>
